<template>
  <div id="map-container" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  name: 'BaiduMap',
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.loadBaiduMapScript();
  },
  methods: {
    loadBaiduMapScript() {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = `https://api.map.baidu.com/api?v=3.0&ak=BBqz4g9W3QYYYdgwDZKBrrMJIhJDJXxN`;
      script.onload = () => {
        this.initMap();
      };
      script.onerror = () => {
        console.error('百度地图API加载失败');
      };
      document.body.appendChild(script);
    },
    initMap() {
      const map = new BMap.Map('map-container');
      const point = new BMap.Point(116.404, 39.915); // 地图中心点坐标
      map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
      this.map = map; // 将地图实例保存到组件的data中，以便在其他地方使用

      // 可以在这里添加更多地图操作，如添加标记、线条、控件等
    },
  },
  beforeDestroy() {
    // 组件销毁前清理，虽然在这个例子中可能不需要，但如果有添加事件监听器等操作，则应该在这里清理
    if (this.map) {
      // 例如：移除事件监听器，关闭某些功能等
      // this.map.removeEventListener(...);
    }
  },
};
</script>

<style scoped>
/* 这里可以添加一些CSS样式，但在这个例子中，主要的样式已经在template的style属性中设置了 */
</style>